<template>
  <el-container>
    <el-header class="no-flex" height="auto">
      <el-form
        class="sys-filters"
        ref="formRef"
        inline
        :model="form"
      >
        <el-form-item label="用户名称" prop="username">
          <el-input
            placeholder="请输入用户名称"
            clearable
            v-model="form.username"
          />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input
            placeholder="请输入手机号"
            clearable
            v-model="form.phone"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">
            搜索
          </el-button>
          <el-button @click="reset">
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button
          type="danger"
          @click="onBatchRoleCancel"
        >
          批量取消授权
        </el-button>
        <el-button type="primary" @click="$router.push('/system/role')">
          关闭
        </el-button>
      </div>
    </el-header>
    <el-main class="nopadding">
      <el-table  ref="tabRef" :data="tableData" style="width: 100%" stripe border>
        <el-table-column align="center" type="selection"/>
        <el-table-column prop="username" label="用户名称" align="center" />
        <el-table-column prop="realName" label="用户昵称" align="center" />
        <el-table-column prop="email" label="邮箱" align="center" />
        <el-table-column prop="phone" label="手机" align="center" />
        <el-table-column prop="createTime" label="创建时间" :formatter="rendererDateTime" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <div class="sys-table-main-actions">
              <el-link
                type="danger"
                :underline="false"
                @click="onRoleCancel(row)"
              >
                取消授权
              </el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer style="display: flex;justify-content: flex-end">
      <el-pagination
        :current-page="pageIndex"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-footer>
  </el-container>
</template>

<script>
export default {
  name: "role-assign",
  data(){
    return{
      form:{
        username:'',
        phone:'',
      },
      tableData:[],
      id:this.$route.query.id,
      pageIndex: 1,
      pageSize: 10,
      total: 0
    }
  },
  created() {
    this.getAssignedRole()
  },
  methods:{
   async getAssignedRole(){
      let {data} = await this.$API.system.roles.assigned.get({
        current: this.pageIndex,
        size: this.pageSize,
        roleId:this.id
      })
     this.tableData = data.records
     this.form.username = data.records.username
     this.form.phone = data.records.phone
    },
    //取消授权
    async onRoleCancel(row){
      this.$confirm('此操作将取消授权,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonClass: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$API.system.roles.cancel.post([{
          roleId:this.id,
          userId:row.id
        }])
        this.$message({
          type: 'success',
          message: '取消授权成功'
        })
        this.getAssignedRole()
      })

    },
    //批量取消授权
    async onBatchRoleCancel(){
      const row = this.$refs.tabRef.getSelectionRows()
      let data = []
      row.map(item => {
        data.push({userId:item.id,roleId:this.id})
      })
      this.$confirm('此操作将取消授权,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonClass: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$API.system.roles.cancel.post(data)
        this.$message({
          type: 'success',
          message: '批量取消授权成功'
        })
        this.getAssignedRole()
      })
    },
    reset(){
      this.$refs.formRef.resetFields()
      this.form = {}
      this.getAssignedRole()
    },
    search(){
      this.getAssignedRole()
      this.form ={}
    },
    //选中
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
    },
    //转换
    rendererDateTime(row, column, cellValue, index) {
      return this.$TOOL.dateFormat(cellValue)
    },
    handleSizeChange(val) {
      this.searchForm.size = val
      this.getAssignedRole()
    },
    handleCurrentChange(val) {
      this.searchForm.current = val
      this.getAssignedRole()
    },
  }
}
</script>

<style scoped>

</style>
